<template>
	<section>

		<el-col :span="24" class="toolbar"  style="padding-bottom: 0px;">
			
			<el-form :inline="true" >
				<el-form-item>
					<el-button type="primary" v-if="$store.state.role!='manager'" @click="skip('/Drawadd','','new')">添加图纸</el-button>
				</el-form-item>				
				<el-form-item>
					<el-input  v-model="key" placeholder="输入查询的关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"  @click="getList">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>			
		<el-tabs v-model="tabletype"  type="card">
		    <el-tab-pane label="我的图纸" name='0'></el-tab-pane>
		    <el-tab-pane label="共享图纸" name='1'></el-tab-pane>
		    <el-tab-pane label="内置图纸" name='2'></el-tab-pane>
		</el-tabs>	
		<!--工具条-->		
		<el-table :data="Lists" highlight-current-row v-loading="loading" style="width: 100%;" @sort-change="sortChange">
			<el-table-column type="index" width='80'>
			</el-table-column>
			<el-table-column prop="name" label="图纸名称"  width="200">
			</el-table-column>
			<el-table-column prop="courseStage" label="图纸类型"  width="200">
				<template scope="scope">
					<p>{{scope.row.courseStage=='0'?'创业基础图纸':'案例分析图纸'}}</p>
				</template>				
			</el-table-column>
			<el-table-column prop="drawingTypeId" label="图纸选择"  width="200">
				<template scope="scope">
					<p v-if="scope.row.drawingTypeId==1">消费者体验流程图</p>
					<p v-if="scope.row.drawingTypeId==2">典型人物</p>
					<p v-if="scope.row.drawingTypeId==3">服务蓝图</p>
					<p v-if="scope.row.drawingTypeId==4">商业模式画布</p>
					<p v-if="scope.row.drawingTypeId==5">电梯演讲</p>
					<p v-if="scope.row.drawingTypeId==6">洞察分析</p>
					<p v-if="scope.row.drawingTypeId==7">思维导图</p>
				</template>					
			</el-table-column>			
			<el-table-column prop="realName" label="创建人" width="200" >
			</el-table-column>
			<el-table-column prop="orgName" label="所属单位" width="200">
			</el-table-column>			
			<el-table-column prop="createTime" label="上传时间" width="200">
			</el-table-column>
			<el-table-column prop="referenceCount" label="引用次数" width="200">
			</el-table-column>			
			<el-table-column prop="birth" min-width="300" label="操作" fixed="right">
				<template scope="scope">
					<el-button size="small" v-if="tabletype=='0'||$store.state.role=='admin'" type="danger" @click="handleDel(scope.row)">删除</el-button>
					<el-button size="small" v-if="tabletype=='0'&&$store.state.role!='manager'||$store.state.role=='admin'" type="primary" @click="skip('/Drawadd',scope.row.drawingId,'edit')">编辑</el-button>
					<el-button size="small" type="success" @click="skip('/Drawadd',scope.row.drawingId,'look')">查看</el-button>
					<el-button size="small" type="warning" v-if="!scope.row.isShared&&tabletype!=2&&$store.state.role!='admin'&&$store.state.role!='manager'" @click="goShared(scope.row,1)">共享</el-button>
					<el-button size="small" type="info" v-if="scope.row.isShared&&tabletype=='0'&&$store.state.role!='admin'" @click="goShared(scope.row,0)">取消共享</el-button>
				</template>					
			</el-table-column>
		</el-table>
		<!--工具-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	
	</section>
</template>
<script>
	import { drawlist,drawdelete,drawadd,drawone,drawedit,bussinesslist,drawlistbuil} from '../../api/api';

	//import NProgress from 'nprogress'
	export default {
		data() {
			return {
				addFormVisible: false,//打分界面是否显示
				loading: false,
				Lists: [],
				total:"",
				pageSize:'10',
				page:'1',
				key:'',
				tabletype:'0',
				isShared:"",
				isSelf:'1',
				sign:"1"
			}
		},
		watch:{
			'tabletype':function(){
				this.pageNum='1';
				if(this.tabletype==0){
					this.isShared='';
					this.sign=1;
				}
				if(this.tabletype==1){
					this.isShared=1;
					this.sign=2;
				}	
				if(this.tabletype==2){
					this.isShared='';
					this.sign=3
				}				
				this.getList();
			}
		},		
		methods: {
		    sortChange:function(column, prop, order){
				if(column){
			      var type='';
			      if(column.prop=='createTime'){
			      	column.prop='create_time';
			      }else if(column.prop=='referenceCount'){
			      	column.prop='reference_count';
			      }
			      if(column.order=="ascending"){
			      	type=column.prop;	
			      }else if(column.order=='descending'){
			      	type=column.prop+' '+'desc';
			      }
			      this.getList(type)			 	
				}
		    },				
			//页面跳转
		    skip(link,id,type){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        			type:type
		        		}
		        	}
		        )
		    },	
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},			    
			//获取项目列表
			getList: function (type) {
				this.loading = true;
				//NProgress.start();
				let params={pageNum:this.page,pageSize:this.pageSize,key:this.key,isShared:this.isShared,sign:this.sign,orderByClause:type};
				drawlist(params).then((res) => {
					this.total=res.total;					
					this.Lists = res.list;
					this.loading = false;
					//NProgress.done();
				});	
			},
			handleDel:function (row) {
				this.$confirm('确认删除该记录吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para =row.drawingId;		
					drawdelete(para).then((res) => {
						if(!res.error){
							this.listLoading = false;
							//NProgress.done();
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getList();							
						}
					});
				})
			},
			goShared:function(row,type){
				this.$confirm('确定操作吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					var params=new URLSearchParams();
					params.append('isShared',type);
					params.append('drawingId',row.drawingId);
					drawedit(params).then((r) => {
						if(!r.error){
							this.$message({
								message: '操作成功',
								type: 'success'
							});
							this.getList();									
						}else{
							this.$message({
								message: '操作失败',
								type: 'error'
							});						
						}
					})	
				})			
			
			},			
		},
		
		mounted() {
			this.getList();
		}
	};

</script>
